<template>
	<el-scrollbar :height="isTagsview ? `calc(100vh - 154px)` : `calc(100vh - 120px)`">
		<zh-space>
			<zh-card title="">
				<zh-form ref="userQueryFrom" :model="state.queryRouterParam">
					<zh-form-input prop="name" label="路由名" placeholder="支持模糊查询" v-model="state.queryRouterParam.name"> </zh-form-input>
					<zh-form-input prop="title" label="标题" placeholder="支持模糊查询" v-model="state.queryRouterParam.title"> </zh-form-input>
					<zh-form-query :form-ref="userQueryFrom" :show-advanced="false" @queryClick="findRouterListBtn"> </zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table
				ref="routerListTable"
				:height="600"
				:columns="state.routerColumn"
				:data="state.routerTableData"
				:disabled="false"
				:stripe="false"
				highlight-current-row
				:tree-config="{ transform: false }"
				:loading="state.routerLoading"
			>
			</zh-table>
		</zh-space>
		<zh-dialog title="关联路由信息" width="50%" v-model="state.routerVisible" @confirm="saveRouter">
			<zh-tree
				ref="routerTreeRef"
				:url="state.treeUrl"
				:moveUrl="state.treeMoveUrl"
				draggable
				:resultFields="{ treeList: 'routerList' }"
				:default-checked-keys="state.checkedRouterKeys"
				node-key="key"
				:height="isTagsview ? `calc(100vh - 142px)` : `calc(100vh - 108px)`"
				:props="{ label: 'title' }"
				:showCheckbox="true"
			></zh-tree>
		</zh-dialog>
	</el-scrollbar>
</template>

<script lang="ts" setup name="FunctionRouterForm">
//------------------接收传入参数------------------------
const props = defineProps({
	selectNode: {
		type: Object,
	},
	functionInfo: {
		type: Object,
	},
});

//------------------定义子组件---------------------------
const userQueryFrom = ref();
const routerListTable = ref();

//------------------内部变量定义-------------------------
const state = reactive({
	// 用户查询条件
	queryRouterParam: {} as any,
	routerLoading: false, // 路由列表参数
	routerTableData: [],
	routerVisible: false,
	routerTreeList: [] as any[],
	expandedRouterKeys: [],
	selectedRouterKeys: [],
	checkedRouterKeys: [],
	searchRouterValue: '',
	autoExpandRouterParent: true,
	routerColumn: [
		{ field: 'title', title: '路由标题', align: 'center', fixed: 'left', width: 250, treeNode: true },
		{ field: 'routerId', title: '路由ID', visible: false, align: 'center', width: 250 },
		{ field: 'name', title: '路由名', align: 'center', width: 150 },
		{ field: 'parentId', title: '父Id', visible: false, align: 'center', width: 150 },
		{ field: 'remarks', title: '备注', align: 'center', width: 250 },
	],
	selectNode: {} as any
});
const { isTagsview } = storeToRefs($store.theme);
const routerTreeRef = ref();

//------------------定义调用方法-------------------------
function findRouterListBtn() {
	if (state.selectNode && state.selectNode.key) {
		findRouterList();
	} else {
		$messageBox.warning('请先选择需要查询的数据', '提示');
	}
}

function findRouterList() {
	if (state.selectNode && state.selectNode.key) {
		const params: any = Object.assign({}, state.queryRouterParam);
		params.funcId = state.selectNode.key;
		state.routerLoading = true;
        $api.common.send.post('function0007',params).then((res) => {
            state.routerTableData = res.result;
            state.routerLoading = false;
        }).catch(() => {
            state.routerLoading = false;
        });
	}
}

function openRouterModel() {
	// 打开添加路由页面
	if (props.functionInfo) {
		const nodeType = props.functionInfo.nodeType;
		if (nodeType === '0') {
			$messageBox.warning('节点不能关联路由', '提示');
			return;
		}
		const publicFlag = props.functionInfo.publicFlag;
		if (publicFlag === '1') {
			$messageBox.warning('公共方法无需关联路由', '提示');
		} else {
			// 获取路由树
			findRouterTreeList();
			// 添加选中节点
		}
	} else {
		$messageBox.warning('请先选择需要关联路由的功能数据', '提示');
	}
}
function findRouterTreeList() {
	console.log(111);
	state.searchRouterValue = '';
	const params = {
		searchText: state.searchRouterValue,
	};
	setTimeout(() => {
        $api.common.send.postCrypto('router0007',params)
			.then((res) => {
				const data = [...res.result.routerList];
				if (data) {
					loopCheckDisable(data);
					state.routerTreeList = data;
					state.checkedRouterKeys = [];
					state.expandedRouterKeys = res.result.expandedKeys;
					console.log(state.routerTableData);
					if (state.routerTableData && state.routerTableData.length > 0) {
						// 设置选中节点
						const checkedKeys = [];
						// 设置展开节点
						const expandedRouterKeys = [];
						loopExpandCheck(state.routerTableData, checkedKeys, expandedRouterKeys);
						state.checkedRouterKeys = checkedKeys;
						console.log(state.checkedRouterKeys);
						state.expandedRouterKeys = expandedRouterKeys;
						state.routerVisible = true;
						// routerTreeRef.value.setCheckedKeys(checkedKeys);
						console.log(state.checkedRouterKeys);
						// console.log(routerTreeRef.value.getCheckedKeys());
						state.autoExpandRouterParent = true;
					}
				}
			})
			.catch(() => {});
	}, 50);
}
function saveRouter() {
	// 获取选中的路由信息
	const params = {
		routerIds: routerTreeRef.value.getCheckedKeys(),
		funcId: props.functionInfo!.funcId,
	};
	setTimeout(() => {
        //function0008
        $api.common.send.post('function0008',params)
			.then(() => {
				findRouterList();
				state.routerVisible = false;
			})
			.catch(() => {});
	}, 50);
}
function loopCheckDisable(data) {
	data.forEach((item) => {
		if (item.children) {
			item.disabled = true;
			loopCheckDisable(item.children);
		}
	});
}
function loopExpandCheck(data, checkedKeys, expandedKeys) {
	data.forEach((item) => {
		expandedKeys.push(item.routerId);
		if (item.children) {
			return loopExpandCheck(item.children, checkedKeys, expandedKeys);
		} else {
			checkedKeys.push(item.routerId);
		}
	});
}
//------------------初始化------------------------------
watch(
	() => props.selectNode,
	(val) => {
        console.log('val')
        console.log(val)
		state.selectNode = val;

	}
);
//初始化赋值
state.selectNode = props.selectNode
//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ findRouterList, routerTableData: state.routerTableData, openRouterModel });
</script>
